{include "INC_header.html" title="导航管理"}
<div id="app-outlet" class="app-outlet">
    <!-- ant-design 应用需要配置 -->
    <a-config-provider :locale="config.locale" :theme="config.theme">
        <aside style="width: 200px; display: flex; flex-flow: column; overflow: hidden; background-color: var(--light-background); color: var(--color-base-contrast);" class="border-right">
            <div class="aside-sites" style="overflow: auto; flex: 1;">
                <div class="ui flex-item site" :class="{ selected:siteId==0 }" @click="getList(0)">
                    <div class="start">
                        <a-avatar :size="32" shape="square">通</a-avatar>
                    </div>
                    <div class="center">
                        <div class="text-bold max-one-line-text">全站点通用</div>
                        <div class="text-small max-one-line-text medium-text padding-top-half">通用的文章分类</div>
                    </div>
                </div>
                <div class="ui flex-item site" :class="{ selected:siteId==site.id }" v-for="site in sites" @click="getList(site.id)">
                    <div class="start">
                        <a-avatar :size="32" shape="square" :src="site.logo"></a-avatar>
                    </div>
                    <div class="center">
                        <div class="text-bold max-one-line-text">{{ site.name }}</div>
                        <div class="text-small max-one-line-text medium-text padding-top-half">{{ site.url }}</div>
                    </div>
                </div>
            </div>
            <div class="padding hover-background">
                <a-button type="primary" block gost href="{url url='/cms/admin/site/list'}"><i class="fa-solid fa-sitemap margin-right-half"></i> 站点管理</a-button>
            </div>
        </aside>
        <div class="app-container">
            <main class="flex-column overflow-hidden">
                <div class="ui table scroll-enable selectable" style="border: none; border-radius: 0;">
                    <div class="thead">
                        <div class="ui row">
                            <div class="col auto-width">导航名称 <a-tooltip title="控制字数在1~30内"><i class="fa fa-info-circle"></i></a-tooltip></div>
                            <div class="col" style="width: 100px;">链接 <a-tooltip title="原文保存，链接必须完整"><i class="fa fa-info-circle"></i></a-tooltip></div>
                            <div class="col" style="width: 150px;">图标 <a-tooltip title="可以填写网络图片"><i class="fa fa-info-circle"></i></a-tooltip></div>
                            <div class="col" style="width: 100px;">排序 <a-tooltip title="同级由小到大排序"><i class="fa fa-info-circle"></i></a-tooltip></div>
                            <div class="col" style="width: 80px;">操作</div>
                        </div>
                    </div>
                    <div class="tbody" v-if="list.length > 0">
                        <category-list v-for="(item, index) in list" :index="index" :list="list" :item="item"></category-list>
                    </div>
                    <div class="tbody empty" v-else>
                        <a-empty :image="simpleImage" description="没有导航数据"></a-empty>
                    </div>
                    <div class="tfoot">
                        <div class="ui flex-item padding">
                            <div class="center">
                                <a-button type="primary" danger @click="addItem"><i class="fa fa-plus margin-right-half"></i> 添加导航</a-button>
                                <!--
                                <div class="ui button danger" @click="addMoreItems"><i class="fa-solid fa-file-circle-plus margin-right-half"></i> 添加多个</div>
                                -->
                            </div>
                            <div class="end" v-if="list.length > 0">
                                <a-button type="primary" @click="save"><i class="fa-regular fa-floppy-disk margin-right-half"></i> 保存导航设置</a-button>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
        <!-- 文件选择器 -->
        <a-modal class="iframe-body"
                 v-model:visible="filesModal.show"
                 :title="filesModal.title"
                 :cancel-text="filesModal.cancelText"
                 :ok-text="filesModal.okText"
                 @ok="filesManagerOk">
            <iframe style="border: solid 1px var(--border-color); border-radius: var(--radius-width);" ref="filesFrame" v-if="filesModal.show" :src="filesModal.fs + '&resize=' + filesModal.resize + '&type=' + filesModal.type + '&multi=' + (filesModal.multi ? 1 : 0)" frameborder="0" scrolling="auto" width="100%" height="100%"></iframe>
        </a-modal>
    </a-config-provider>
</div>
<template id="categories">
    <div class="ui row cms-tree">
        <div class="col auto-width">
            <div class="ui flex-item">
                <div class="" :style="{ width: (item.floor * 21) + 'px' }"></div>
                <div class="start justify-center">
                    <i :class="'toggle fa ' + (item.open || item.open === undefined ? 'fa-square-minus' : 'fa-square-plus')" @click="toggleItem(item)"></i>
                </div>
                <div class="start"><a-input placeholder="导航名称" maxlength="20" v-model:value="item.name" /></div>
                <div class="center justify-center">
                    <div class="add-sub">
                        <a href="javascript:;" @click="addItem(item)">加下级</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col" style="width: 100px;">
            <a-input v-model:value="item.url" placeholder="完整的链接地址"></a-input>
        </div>
        <div class="col" style="width: 150px;">
            <a-input-search
                    v-model:value="item.icon"
                    placeholder="图标/图片地址"
                    @search="setIcon(item)"
            />
        </div>
        <div class="col" style="width: 100px;">
            <a-input-number v-model:value="item.weight" :keyboard="true" :min="-100" :max="100" />
        </div>
        <div class="col" style="width: 80px;">
            <a-button v-if="item.id == 0" danger block @click="deleteItem(list, index)">删除</a-button>
            <template v-else>
                <a-popconfirm
                        title="确定要删除此导航？"
                        ok-text="确定"
                        cancel-text="取消"
                        placement="left"
                        @confirm="deleteItem(list, index)">
                    <a-button danger block>删除</a-button>
                </a-popconfirm>
            </template>
        </div>
    </div>
    <template v-if="item.subList && (item.open == undefined || item.open)">
        <category-list v-for="(sub, si) in item.subList" :index="si" :list="item.subList" :item="sub"></category-list>
    </template>
</template>
<script>
    //vue app
    const { createApp, defineComponent, ref } = Vue;
    const { message, Empty } = antd;
    const app = createApp({
        data() {
            return {
                //主题配置
                config: appProviderConfig,
                //空图片
                simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
                //列表
                list: [],
                //站点列表
                sites: [],
                //站点ID筛选
                siteId: 0,
                //文件管理器
                filesModal: {
                    show: false,
                    title: "文件选择",
                    okText: "确定",
                    cancelText: "取消",
                    ok: null,
                    fs: "{url url='/fs'}?parentId=0&groupName=cms&selectable=1",
                    resize: "",
                    type: "all",
                    multi: false
                },
            }
        },
        mounted() {
            //挂载成功
            this.initData();
        },
        methods: {
            //方法
            initData() {
                let self = this;
                //加载站点
                axios.get("{url url='/cms/api/site/list'}", {
                    params: {
                        admin: 1,
                        total: 'max'
                    }
                }).then(({ data }) => {
                    if (data.error === 0) {
                        self.sites = data.data.list
                    }
                });
                this.getList(0);
            },
            getList(siteId) {
                let self = this;
                self.siteId = siteId;
                //加载所有导航
                const hide = message.loading("正在加载...", 0);
                axios.get("{url url='/cms/api/nav/list'}", {
                    params: {
                        parentId: 0,
                        admin: 1,
                        siteId
                    }
                }).then(({ data }) => {
                    hide();
                    if (data.error === 0) {
                        self.list = data.data;
                    } else {
                        message.error(data.message);
                    }
                }).catch(() => {
                    hide();
                    message.error("服务端繁忙");
                });
            },
            //添加新导航
            addItem() {
                this.list.push({
                    id: 0,
                    parentId: 0,
                    icon: '',
                    name: '',
                    weight: 50,
                    url: '',
                    floor: 0
                });
            },
            //一次性添加多个
            addMoreItems() {

            },
            //打开文件管理对话框
            filesManagerOpen: function (params) {
                params = params || {};
                this.filesModal.title = params.title || "文件选择";
                this.filesModal.okText = params.okText || "确定";
                this.filesModal.cancelText = params.cancelText || "取消";
                this.filesModal.resize = params.resize || "";
                this.filesModal.type = params.type || "all";
                this.filesModal.multi = params.multi || false;
                this.filesModal.ok = params.ok || null;
                this.filesModal.show = true;
            },
            //点击确定
            filesManagerOk: function () {
                //从iFrame里边找图片
                let filesManager = this.$refs.filesFrame.contentWindow.FilesManager || {};
                if (filesManager.list) {
                    let list = [];
                    filesManager.list.map(file => {
                        if (file.checked && (this.filesModal.type === "all" || file.type === this.filesModal.type)) {
                            list.push(file);
                        }
                    });
                    if (list.length > 0 && typeof this.filesModal.ok === "function") {
                        this.filesModal.ok(this.filesModal.multi ? list : list[0]);
                    }
                }
                //关闭文件选择框
                this.filesModal.show = false;
            },
            //保存
            save() {
                if (this.list.length > 0) {
                    let self = this;
                    const hide = message.loading("正在保存数据");
                    axios.post("{url url='/cms/api/nav/saveList'}", { list:this.list, siteId: this.siteId }).then(({ data }) => {
                        hide();
                        if (data.error === 0) {
                            //重载数据
                            self.getList(self.siteId);
                            message.success("数据成功");
                        } else {
                            message.error(data.message);
                        }
                    }).catch(() => {
                        hide();
                        message.error("服务端繁忙");
                    });
                }
            }
        }
    }).use(antd);
    //注册一个组件
    app.component('category-list', {
        template: "#categories",
        props: {
            item: {
                type: Object,
                default: () => {}
            },
            list: {
                type: Array,
                default: () => []
            },
            index: {
                type: Number,
                default: () => -1
            }
        },
        methods: {
            //关闭、打开下级
            toggleItem(item, add) {
                add = add || false;
                if (item.subList || item.id === 0) {
                    item.open = item.open === true || item.open === false ? item.open : true;
                    item.open = !item.open;
                    //可能需要强制重新渲染
                } else {
                    //尝试加载下一级数据
                    const hide = message.loading("正在加载...", 0);
                    axios.get("{url url='/cms/api/nav/list'}", {
                        params: {
                            parentId: item.id,
                            admin: 1
                        }
                    }).then(({ data }) => {
                        hide();
                        if (data.error === 0) {
                            //可能需要强制重新渲染
                            item.open = true;
                            item.subList = data.subList || [];
                            item.subList.concat(data.data);
                            if (add) {
                                item.subList.push({
                                    id: 0,
                                    parentId: item.id,
                                    icon: '',
                                    name: '',
                                    weight: 50,
                                    url: '',
                                    floor: item.floor + 1
                                });
                            }
                        } else {
                            message.error(data.message);
                        }
                    }).catch(() => {
                        hide();
                        message.error("服务端繁忙")
                    });
                }
            },
            //添加新导航
            addItem(item) {
                if (item.id > 0 && !item.subList) {
                    return this.toggleItem(item, true);
                }
                item.open = true;
                item.subList = item.subList || [];
                item.subList.push({
                    id: 0,
                    parentId: item.id,
                    icon: '',
                    name: '',
                    weight: 50,
                    url: '',
                    floor: item.floor + 1
                });
            },
            //删除导航
            deleteItem(list, index) {
                let item = list[index];
                if (item) {
                    if (item.id > 0) {
                        const hide = message.loading("正在删除...", 0);
                        axios.post("{url url='/cms/api/nav/delete'}", { id:item.id }).then(({ data }) => {
                            hide();
                            if (data.error === 0) {
                                //删除
                                list.splice(index, 1);
                                if (item.parentId === 0) {
                                    //顶级导航
                                }
                            } else {
                                message.error(data.message);
                            }
                        }).catch(() => {
                            hide();
                            message.error("服务端繁忙")
                        });
                    } else {
                        //临时添加，未保存，直接删除即可
                        list.splice(index, 1);
                        if (item.parentId === 0) {
                            //顶级导航
                        }
                    }
                }
            },
            editItem(id) {
                //导航不需要单独编辑...
            },
            //使用图片作为图标
            setIcon(item) {
                let self = this;
                vm.filesManagerOpen({
                    title: "选择导航图标",
                    okText: "确定",
                    cancelText: "取消",
                    type: "image",
                    multi: false,
                    ok: image => {
                        item.icon = image.url;
                    }
                });
            }
        }
    });
    //挂载
    const vm = app.mount("#app-outlet");
    //
    if (window.parent) {
        window.parent.postMessage({
            event: "location",
            data: [
                { name:"导航管理" }
            ]
        });
    }
</script>
{include "INC_footer.html"}